<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <!-- <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(
          135deg,
          #1e5799 0%,
          #207cca 51%,
          #2989d8 100%
        );
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      .login-container {
        width: 100%;
        max-width: 450px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        padding: 40px;
        text-align: center;
      }

      .logo {
        margin-bottom: 30px;
      }

      .logo i {
        font-size: 70px;
        color: #1e5799;
        margin-bottom: 15px;
      }

      .logo h1 {
        color: #2c3e50;
        font-size: 28px;
        font-weight: 600;
        margin: 10px 0;
      }

      .logo p {
        color: #7f8c8d;
        font-size: 16px;
      }

      .input-group {
        margin-bottom: 25px;
        text-align: left;
      }

      .input-group label {
        display: block;
        margin-bottom: 8px;
        color: #34495e;
        font-weight: 500;
        font-size: 16px;
      }

      .input-field {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        border: 2px solid #dce4ec;
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s;
      }

      .input-field:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
      }

      .password-container {
        position: relative;
      }

      .toggle-password {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #7f8c8d;
        font-size: 20px;
      }

      .password-strength {
        font-size: 14px;
        margin-top: 8px;
        color: #7f8c8d;
        height: 20px;
      }

      .password-strength.valid {
        color: #27ae60;
      }

      .password-strength.invalid {
        color: #e74c3c;
      }

      .recaptcha {
        margin: 20px 0;
        display: flex;
        justify-content: center;
      }

      .login-button {
        width: 100%;
        height: 55px;
        background: #2980b9;
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: 15px;
      }

      .login-button:hover {
        background: #3498db;
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(52, 152, 219, 0.3);
      }

      .login-button:disabled {
        background: #bdc3c7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .error-message {
        color: #e74c3c;
        margin-top: 15px;
        min-height: 25px;
        font-weight: 500;
      }

      .success-message {
        color: #27ae60;
        margin-top: 15px;
        min-height: 25px;
        font-weight: 500;
      }

      .footer {
        margin-top: 25px;
        color: #7f8c8d;
        font-size: 14px;
      }

      .footer a {
        color: #3498db;
        text-decoration: none;
      }

      .footer a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="login-container">
      <div class="logo">
        <i class="fas fa-lock"></i>
        <h1>安全登录系统</h1>
        <p>使用您的凭据访问您的账户</p>
      </div>

      <div class="input-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          class="input-field"
          placeholder="输入您的用户名"
        />
      </div>

      <div class="input-group">
        <label for="password">密码</label>
        <div class="password-container">
          <input
            type="password"
            id="password"
            class="input-field"
            placeholder="输入您的密码"
          />
          <i id="toggle-password" class="toggle-password fas fa-eye"></i>
        </div>
        <div id="password-strength" class="password-strength">
          需要8位以上，包含数字、大小写字母和特殊字符
        </div>
      </div>

      <div class="recaptcha">
        <div
          id="recaptcha"
          class="g-recaptcha"
          data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
          data-callback="recaptchaCallback"
        ></div>
      </div>

      <button id="login-button" class="login-button" disabled>登录</button>

      <div id="error-message" class="error-message"></div>
      <div id="success-message" class="success-message"></div>

      <div class="footer">
        <p>© 2023 安全系统 | <a href="#">忘记密码?</a></p>
      </div>
    </div>

    <script>
      // DOM元素
      const usernameInput = document.getElementById("username");
      const passwordInput = document.getElementById("password");
      const togglePassword = document.getElementById("toggle-password");
      const passwordStrength = document.getElementById("password-strength");
      const loginButton = document.getElementById("login-button");
      const errorMessage = document.getElementById("error-message");
      const successMessage = document.getElementById("success-message");

      // 密码显示/隐藏切换
      togglePassword.addEventListener("click", function () {
        const type =
          passwordInput.getAttribute("type") === "password"
            ? "text"
            : "password";
        passwordInput.setAttribute("type", type);
        this.classList.toggle("fa-eye-slash");
        this.classList.toggle("fa-eye");
      });

      // 密码强度验证
      function validatePassword(password) {
        // 至少8位，包含数字、大小写字母和特殊字符
        const regex =
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
        return regex.test(password);
      }

      // reCAPTCHA验证回调
      function recaptchaCallback() {
        const username = usernameInput.value.trim();
        const password = passwordInput.value;

        if (username && password && validatePassword(password)) {
          loginButton.disabled = false;
        }
      }

      // 密码输入事件监听
      passwordInput.addEventListener("input", function () {
        const password = this.value;

        if (validatePassword(password)) {
          passwordStrength.textContent = "✓ 密码强度足够";
          passwordStrength.className = "password-strength valid";
        } else {
          passwordStrength.textContent =
            "需要8位以上，包含数字、大小写字母和特殊字符";
          passwordStrength.className = "password-strength invalid";
        }

        // 检查是否满足登录条件（去掉验证码判断）
        const username = usernameInput.value.trim();
        if (username && password && validatePassword(password)) {
          loginButton.disabled = false;
        } else {
          loginButton.disabled = true;
        }
      });

      // 用户名输入事件监听
      usernameInput.addEventListener("input", function () {
        const username = this.value.trim();
        const password = passwordInput.value;
        if (username && password && validatePassword(password)) {
          loginButton.disabled = false;
        } else {
          loginButton.disabled = true;
        }
      });

      // 登录按钮点击事件
      loginButton.addEventListener("click", function () {
        const username = usernameInput.value.trim();
        const password = passwordInput.value;

        // 重置消息
        errorMessage.textContent = "";
        successMessage.textContent = "";

        // 显示加载状态
        loginButton.innerHTML =
          '<i class="fas fa-spinner fa-spin"></i> 登录中...';
        loginButton.disabled = true;

        // 发送登录请求
        fetch("http://localhost:8990/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: username,
            password: password,
          }),
        })
          .then((response) => {
            if (!response.ok) {
              return response.json().then((err) => {
                throw err;
              });
            }
            return response.json();
          })
          .then((data) => {
            if (data.success) {
              successMessage.textContent = data.message;
              // 登录成功后的操作（例如重定向）
              setTimeout(() => {
                alert("登录成功！");
                // 实际应用中可能是： window.location.href = '/dashboard';
              }, 1000);
            } else {
              throw data;
            }
          })
          .catch((error) => {
            errorMessage.textContent = error.error || "登录失败，请重试";
            grecaptcha.reset(); // 重置验证码
            loginButton.disabled = true;
          })
          .finally(() => {
            loginButton.innerHTML = "登录";
          });
      });
    </script>
  </body>
</html>
